<template>
  <div class="voice">
    <van-nav-bar
      title="语音管理"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="addCon">
      <van-cell-group>
        <van-field
          label="开始时间"
          @click="
            showTime = true;
            startTimeShow = true;
          "
          v-model="saveVoice.startTime"
        />
        <van-field
          label="结束时间"
          @click="
            showTime = true;
            endTimeShow = true;
          "
          v-model="saveVoice.endTime"
        />
        <van-field label="总时长" v-model="saveVoice.allTime" />
        <van-field label="日期" @click=" showTime = true;nowTimeShow = true" v-model="saveVoice.nowDate" />
        <van-field
          v-model="saveVoice.remark"
          rows="2"
          autosize
          label="备注"
          type="textarea"
          maxlength="50"
          placeholder="请输入备注"
          show-word-limit
        />
      </van-cell-group>
      <van-button size="large" type="primary" @click="addVoice">新增</van-button>
    </div>
    <van-popup
      v-model:show="showTime"
      position="bottom"
      @click-overlay="
        startTimeShow = false;
        endTimeShow = false;
        nowTimeShow = false;
      "
    >
      <van-datetime-picker
       :min-date="minDate"
        v-show="startTimeShow"
        type="datetime"
        @cancel="
          showTime = false;
          startTimeShow = false;
        "
        @confirm="startConfirm"
      />
      <van-datetime-picker
      :min-date="minDate"
        v-show="endTimeShow"
        type="datetime"
        @cancel="
          showTime = false;
          endTimeShow = false;
        "
        @confirm="endConfirm"
      />
      <van-datetime-picker
      :min-date="minDate"
        v-show="nowTimeShow"
        type="date"
        title="选择年月日"
         @confirm="nowConfirm"
          @cancel="
          showTime = false;
          nowTimeShow = false;
        "
      />
    </van-popup>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import { get, post } from "@/api/http";
import { useRouter } from "vue-router";
import { Toast } from 'vant';
export default defineComponent({
  name: "addVoice",
  components: {},
  setup() {
    const state = reactive({
      showTime: false,
      startTimeShow: false,
      endTimeShow: false,
      nowTimeShow: false,
      saveVoice: {
        startTime: "",
        endTime: "",
        allTime: "",
        nowDate: "",
        remark: "",
      },
    });

    const GMTToStr = (time: any) => {
      let date = new Date(time);
      let Str =
        date.getFullYear() +
        "-" +
        (date.getMonth() + 1) +
        "-" +
        date.getDate() +
        " " +
        date.getHours() +
        ":" +
        date.getMinutes() +
        ":" +
        date.getSeconds();
      return Str;
    };
    const router = useRouter();
    const onClickLeft = () => router.push("/voice");
    const startConfirm = (e: any) => {
      state.saveVoice.startTime = GMTToStr(e);
      state.showTime = false;
      state.startTimeShow = false;
    };
    const endConfirm = (e: any) => {
      state.saveVoice.endTime = GMTToStr(e);
      state.showTime = false;
      state.endTimeShow = false;
    };
    const nowConfirm = (e: any) => {
      state.saveVoice.nowDate = GMTToStr(e);
      state.showTime = false;
      state.nowTimeShow = false;
    };
    const addVoice = async()=>{
        console.log(state.saveVoice);
        const res:any = await post("/addVoice",state.saveVoice)
        console.log(res);
        if (res.status === 200) {
            Toast({
                message: res.msg,
                icon: 'like-o',
            });
            router.push("/voice")
        }
        
    }
    return {
      minDate: new Date(2021, 3, 1),
      onClickLeft,
      ...toRefs(state),
      startConfirm,
      endConfirm,
      nowConfirm,
      addVoice
    };
  },
});
</script>
<style lang="less" scoped>
.addCon {
  margin-top: 50px;
}
</style>